<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>歌曲列表</title>
    <link rel="stylesheet" href="/static/easyui/uimaker/easyui.css">
    <link href="/static/easyui/uimaker/icon.css" rel="stylesheet" type="text/css"/>
    <link href="/static/layui/css/layui.css" rel="stylesheet" type="text/css"/>


    <script type="text/javascript" src="/static/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="/static/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="/static/easyui/easyui-lang-zh_CN.js"></script>

    <script type="text/javascript" src="/static/vue/vue.js"></script>
    <link href="/static/elementUI/index.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="/static/elementUI/index.js"></script>

    <style type="text/css">
        a:link {
            color: blue;
            text-decoration: none
        }

        /* 未访问的链接 */
        a:visited {
            color: blue
        }

        /* 已访问的链接 */
        a:hover {
            color: green
        }

        /* 当有鼠标悬停在链接上 */
        a:active {
            color: green
        }

        /* 被选择的链接 */
    </style>
</head>
<body>
<div class="container" id="container">
    <div id="tb" style="padding:0 30px;">
        关键字: <input type="text" id="keyword" name="keyword" style="width:166px;height:35px;line-height:35px;"/>
        <select id="type" style="width:166px;height:35px;line-height:35px;">
            <option value=-1>请选择类型</option>
        </select>
        <a href="javascript:doSearch()" id="searchBtn" class="easyui-linkbutton"
           data-options="iconCls:'icon-search'">查询</a>
        <a href="javascript:reset();" id="setBtn" class="easyui-linkbutton"
           data-options="iconCls:'icon-reload'">重置</a>
        <a href="javascript:add()" class="easyui-linkbutton" data-options="iconCls:'icon-add'">添加</a>
    </div>
    <table id="dg"></table>
</div>
<div id="d1"></div>
<script type="text/javascript">

    let app = new Vue({
        el: "#container",
        data: {
            v: 0
        },
        methods: {},
        mounted() {
        }
    })

    $(function () {
        $("#dg").datagrid({
            title: "任务列表",
            striped: true,
            pagination: true,
            pageNumber: 1,
            pageList: [2, 5, 10, 20, 30],
            rownumbers: true,
            pagePosition: "top",
            // 当url不满足正常的取值时，需要自定义ajax请求，包括请求头、请求方法、参数
            loader: function (param, success, error) {
                var pager = $('#dg').datagrid('getPager'); // 获取分页器对象
                var pageNum = $(pager).pagination('options').pageNumber; // 获取当前页码
                var pageSize = $(pager).pagination('options').pageSize;
                let keyword = $("#keyword").val();
                let type = $("#type").val();
                if (type === "-1") {
                    type = null;
                }
                $.ajax({
                    method: "post",
                    url: "/home/progress/query",
                    headers: {
                        "Content-Type": "application/json"
                    },
                    data: JSON.stringify({
                        "keyword": keyword,
                        "pageNum": pageNum,
                        "pageSize": pageSize,
                        "type":type
                    }),
                    success: success,
                    error: error
                })
            },
            // 如果接口返回的数据不是标准的total和row的属性，则需要进行映射
            loadFilter: function (response) {
                let data = response.data;
                return {total: data.total, rows: data.records}
            },

            columns: [[
                {field: "name", title: '任务名称', width: "10%"},
                {
                    field: "user", title: '相关人物', width: "15%",
                    formatter: function (value, rowData, index) {
                        let content = "";
                        if (rowData.user != null && rowData.user.length > 0) {
                            $.each(rowData.user, function (index, val) {
                                content += "<button type='button' class='layui-btn layui-btn-normal layui-btn-xs'>" + val + "</button>"
                            })
                        }
                        return content;
                    }
                },
                {
                    field: "typeName", title: '类型', width: "5%"
                },
                {
                    field: "rate", title: '执行情况', width: "10%",
                    formatter: function (value, rowData, index) {
                        let content = '<div class="easyui-progressbar" style="width:80%" data-options="value:' + rowData.rate * 100 + '"></div>';
                        setTimeout(function () {
                            $('.easyui-progressbar').progressbar(); // 手动初始化进度条
                        }, 0);
                        return content;
                    }
                },
                {field: "numberTimes", title: '执行次数', width: "10%"},
                {
                    field: "priorityLevel", title: '优先级', width: "5%", formatter:function (value, rowData, index) {
                        let content = '';
                        let level = rowData.priorityLevel;
                        if (Number.isInteger(level) && level > 0) {
                            content = '';
                            for (let i = 0; i< level; i++) {
                                content += '<i class="layui-icon" style="font-size: 10px; color: #1E9FFF;">&#58880;</i>';
                            }
                        }
                        return content;
                    }
                },
                // {field: "createTime", title: '创建时间', width: "10%"},
                // {field: "updateTime", title: '更新时间', width: "10%"},
                {
                    field: "option", title: '操作', width: '15%',
                    formatter: function (value, rowData, index) {
                        let content = '<button class="layui-btn layui-btn-danger  layui-btn-xs" onclick="del(' + rowData.id + ')">删除</button>' +
                            '<button class="layui-btn layui-btn-normal  layui-btn-xs" onclick="edit(' + rowData.id + ')">修改</button>' +
                            '<button class="layui-btn layui-btn-warm layui-btn-xs" onclick="detail(' + rowData.id + ')">详情</button>'
                        return content;
                    }
                }
            ]],
            onLoadSuccess: function () {
                $("a[name='opera']").linkbutton({text: '删除', iconCls: 'icon-remove'});
            },
            fixed: true,
            fitColumns: true
        });

        // 请求下拉条
        var getTypeList = $.get("/home/dict/getByType?dictTypeEnum=PROGRESS", {}, function (data) {
            let type = $("#type");
            $.each(data, function (index, val) {
                type.append("<option value='" + val.name + "'>" + val.description + "</option>");
            });
        }, "json")

    });

    /* doSerch函数，在每次执行完对数据库的操作之后刷新数据表 */
    function doSearch() {
        $('#dg').datagrid('load', {});
    }

    /* 点击重置按钮，重置按钮如果要生效，则input标签不能使用easyUI的样式，必须为原生的HTML标签 */
    function reset() {
        $("#keyword").val("");
    }

    /* 点击添加按钮 */
    function add() {
        let options = {
            width: 1000,
            height: 600,
            title: "ADD",
            url: "manage/progress/progressAdd.html"
        };
        window.parent.openTopWindow(options);
        window.parent.$("#topWindow").window({
            onBeforeClose: function () {
                doSearch();
            }
        })
    }

    /* 点击删除执行的函数 */
    function del(id) {
        $.messager.confirm("警告", "确认删除？", function (data) {
            if (data) {
                $.post(
                    "/home/progress/remove?id=" + id,
                    $(this).serialize(),
                    function (response) {
                        window.parent.$.messager.alert("提示", response.message, "info", function () {
                            if (response.data === true) {
                                doSearch();
                            }
                        });
                    }, "json");
            }
        })
    }

    /* 点击修改执行的 函数 */
    function edit(id) {
        window.parent.openTopWindow({
            width: 1000,
            height: 600,
            title: "EDIT",
            url: "manage/progress/progressEdit.html?id=" + id
        })
        window.parent.$('#topWindow').window({
            onBeforeClose: function () {
                doSearch();
            }
        });
    }

    /* 点击查看详情执行的函数 */
    function detail(id) {
        let options = {
            width: 1000,
            height: 600,
            title: "DETAIL",
            url: "manage/progress/progressDetail.html?id=" + id
        }

        window.parent.openTopWindow(options);
    }
</script>
</body>
</html>